{% extends 'base.html' %}
{% block content %}
<div class="demoTable">
  搜索 key：
  <div class="layui-inline">
    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
  </div>
  <button class="layui-btn" data-type="reload">搜索</button>
</div>

<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
<script>
layui.use('table', function(){
  var table = layui.table;

  //方法级渲染
  table.render({
    elem: '#LAY_table_user'
    ,url: '{% url 'operation_del' %}?type=json'
    ,cols: [[
      {checkbox: true, fixed: true}
      ,{field:'id', title: 'ID', width:50, sort: true}
      ,{field:'username', title: '用户名', width:80, sort: true}
      ,{field:'server', title: 'redis', width:80, sort: true}
      ,{field:'db', title: '库', width:80, sort: true}
      ,{field:'key', title: 'key', width:150, sort: true}
      ,{field:'old_value', title: '旧值', width:380, sort: true}
      ,{field:'type', title: '类型', width:80, sort: true}
      ,{field:'add_time', title: '修改时间', width:200, sort: true}
{#      ,{fixed:'right', width:160, align:'center', toolbar: '#barDemo'}#}
    ]]
    ,id: 'testReload'
    ,page: true
    ,height: 600
  });

  var $ = layui.$, active = {
    reload: function(){
      var demoReload = $('#demoReload');

      table.reload('testReload', {
        where: {
          key: {
            id: demoReload.val()
          }
        }
      });
    }
  };
  table.on('checkbox(user)', function(obj){
    console.log(obj)
  });

  table.on('tool(user)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      layer.open({
          title: data.data.key,
          content: JSON.stringify(data.data.value)
      });
    } else if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
      layer.close(index);
      });
    } else if(obj.event === 'edit'){
        layer.msg(data.id)
    }
  });

  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });
});

</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-normal layui-btn-mini" lay-event="detail">查看</a>
{#  <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>#}
{#  <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>#}
</script>
{% endblock %}